<!--
 * @Author: yumao 123456
 * @Date: 2023-10-18 13:51:02
 * @LastEditors: yumao 123456
 * @LastEditTime: 2023-12-01 10:09:47
 * @FilePath: \gm公司数据大屏\src\views\cpc\components\cpcTop.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="cpcTop">
        <ul class="cpcTopUl">
            <li class="cpcTopLi">
                <p class="biaoL">党组织</p>
                <div class="infop">
                    <p class="num">{{ index1 }}</p>
                    <p class="unit">个</p>
                </div>
            </li>
            <li class="cpcTopLi">
                <p class="biaoL">党员人数</p>
                <div class="infop">
                    <p class="num">{{ index2 }}</p>
                    <p class="unit">人</p>
                </div>
            </li>
            <li class="cpcTopLi">
                <p class="biaoL">星级党支部占比</p>
                <div class="infop">
                    <p class="num">{{ index3 }}</p>
                    <p class="unit"></p>
                </div>
            </li>
            <li class="cpcTopLi">
                <p class="biaoL">党员干部</p>
                <div class="infop">
                    <p class="num">{{ index4 }}</p>
                    <p class="unit">人</p>
                </div>
            </li>
            <li class="cpcTopLi">
                <p class="biaoL">云荟新声</p>
                <div class="infop">
                    <p class="num">{{ index5 }}</p>
                    <p class="unit">人</p>
                </div>
            </li>
            <li class="cpcTopLi">
                <p class="biaoL">入党积极分子</p>
                <div class="infop">
                    <p class="num">{{ index6 }}</p>
                    <p class="unit">人</p>
                </div>
            </li>
            <li class="cpcTopLi">
                <p class="biaoL">发展对象</p>
                <div class="infop">
                    <p class="num">{{ index7 }}</p>
                    <p class="unit">人</p>
                </div>
            </li>
            <li class="cpcTopLi">
                <p class="biaoL">预备党员</p>
                <div class="infop">
                    <p class="num">{{ index8 }}</p>
                    <p class="unit">人</p>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import { screenTopData } from '@/api/cpc.js'
export default {
    data() {
        return {
            index1: '',
            index2: '',
            index3: '',
            index4: '',
            index5: '',
            index6: '',
            index7: '',
            index8: ''
        }
    },
    mounted() {
        this.cpcTopAll()
    },
    methods: {
        cpcTopAll() {
            screenTopData().then((res) => {
                this.index1 = res.data.Index.index1
                this.index2 = res.data.Index.index2
                this.index3 = res.data.Index.index3
                this.index4 = res.data.Index.index4
                this.index5 = res.data.Index.index5
                this.index6 = res.data.Index.index6
                this.index7 = res.data.Index.index7
                this.index8 = res.data.Index.index8
            })
        }
    }
}
</script>

<style lang='scss' scoped>
.cpcTop {
    .cpcTopUl {
        display: flex;
        justify-content: space-between;
        padding: 0 16px 0 24px;
        box-sizing: border-box;
        .cpcTopLi {
            width: 200px;
            height: 81px;
            background-image: url('../../../assets/cpc/boxBg.png');
            background-position: center;
            background-size: cover;
            text-align: center;
            .biaoL {
                font-size: 16px;
                font-family: 'pingfang';
                font-weight: bold;
                margin-top: 12px;
            }
            .infop {
                display: flex;
                justify-content: center;
                align-items: flex-end;
                margin-top: 6px;
                .num {
                    font-size: 28px;
                    font-style: italic;
                }
                .unit {
                    margin-bottom: 5px;
                    margin-left: 10px;
                }
            }
        }
    }
}
</style>